<template>
  <view class="pt-45 mx-30 pb-160">
    <view class="bg-white px-24 pt-22 pb-22 rd-15rpx">
      <view class="bg-#EAFFF3 w-full h-75 center">
        <u-image
          :src="$sc.loadImg('address.png')"
          height="64rpx"
          width="604rpx"></u-image>
      </view>
      <view class="mt-35 color-#333 text-32">基本信息</view>
      <view class="mt-60">
        <u-cell-group :border="false">
          <u-cell
            title="被服务人"
            value="孙媛媛 370783********3344"
            isLink></u-cell>
          <u-cell title="手机号" value="13305795404" isLink></u-cell>
          <u-cell
            title="地址信息"
            value="潍坊奎文区国际大厦一单元203"
            isLink></u-cell>
          <u-cell title="归属医院" value="寿光人民医院" isLink></u-cell>
          <u-cell
            title="服务时间"
            value="今天 下午"
            isLink
            :border="false"></u-cell>
        </u-cell-group>
      </view>
    </view>
    <view class="bg-white rd-15rpx p-25 box-border mt-20">
      <view class="flex">
        <u-image
          :src="$sc.loadImg('banner.png')"
          width="200rpx"
          height="200rpx"
          radius="20rpx"></u-image>
        <view class="ml-20 flex-1">
          <view class="color-#333 text-32">伤口拆线</view>
          <view class="text-26 color-#333 mt-30 mb-50"
            >创面清理 | 更换敷料</view
          >
          <view class="flex justify-between">
            <view class="color-#FF2424 text-32">
              <text class="text-22">￥</text>
              155.00
            </view>
            <view class="color-#999 text-30">X1</view>
          </view>
        </view>
      </view>
      <view class="my-34">
        <u-gap height="1rpx" bgColor="#e6e6e6"></u-gap>
      </view>
      <view class="color-#990 text-26 mb-30">当前耗材</view>
      <view
        class="rd-15rpx bg-#E0F7F2 border border-dashed border-#5DBE88 p-22 box-border text-26 color-#244131">
        一次性换药包1个、敷贴10*151个/绷带1卷、凡士林
        纱布1块、自粘绷带1个、弹力帽1个
      </view>
    </view>
    <view class="bg-white rd-15rpx p-25 box-border mt-20">
      <view class="mt-20 color-#333 text-32 font-bold mb-30">订单明细</view>
      <view class="flex justify-between text-26 mb-40">
        <view class="color-#999">服务费x1</view>
        <view class="color-#333">￥155</view>
      </view>
      <view class="flex justify-between text-26 mb-40">
        <view class="color-#999">耗材费</view>
        <view class="color-#333">￥155</view>
      </view>
      <view class="flex justify-between text-26 mb-40">
        <view class="color-#999">路程费(0公里）</view>
        <view class="color-#333">￥155</view>
      </view>
      <view class="flex justify-between text-26">
        <view class="color-#999">夜间费</view>
        <view class="color-#333">￥155</view>
      </view>
      <view class="flex justify-end">
        <view class="flex items-baseline">
          <text class="color-#333 text-26">合计</text>
          <text class="color-#FD4245 text-24">￥</text>
          <text class="color-#FD4245 text-36 font-bold">198.4</text>
        </view>
      </view>
    </view>
    <view class="flex items-center mt-40">
      <up-checkbox
        :customStyle="{ marginBottom: '8px' }"
        label="我已阅读并同意"
        name="agree"
        usedAlone
        labelColor="#999"
        labelSize="24rpx"
        shape="circle"
        activeColor="#5dbe88"
        v-model:checked="agree">
      </up-checkbox>
      <view class="color-#5DBE88 text-24">《隐私保护协议》</view>
    </view>
    <view class="fixed-add">
      <view class="flex items-center">
        <text class="color-#333 text-26">合计</text>
        <text class="color-#FD4245 text-24">￥</text>
        <text class="color-#FD4245 text-36 font-bold mr-53">198.4</text>
        <u-button
          type="primary"
          shape="circle"
          color="#24C568"
          :custom-style="{ height: '92rpx', width: '260rpx' }"
          >提交订单</u-button
        >
      </view>
    </view>
  </view>
</template>

<script setup>
const agree = ref(false);
</script>

<style lang="scss" scoped>
.fixed-add {
  width: 100%;
  height: 130rpx;
  background-color: #fff;
  box-shadow: 0px 10px 28px 2px rgba(186, 190, 195, 0.55);
  display: flex;
  justify-content: end;
  position: fixed;
  align-items: center;
  right: 0;
  bottom: 0;
  padding-right: 24rpx;
  box-sizing: border-box;
}
</style>
